<template>
  <div>
    <clerk-filter v-if="pages.pageClerkFilter.popMe" @closed="handleCancelAddAct"></clerk-filter>
    <activity-mdf v-if="pages.pageActMdf.popMe" ref="refPageActMdf" @closed="handleCancelMdfAct"></activity-mdf>
    <div v-if="pages.pageMain.popMe" class="page">
      <!-- <div class="title_div">
        <div class="title_item">
          <div class="title_add_act" @click.stop="handleClickAddAct">
            <img class="icon_add_1" src="~@/assets/images/icon_add_2.png" />
            <div class="icon_add_2">
              <div class="icon_text">创建活动</div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 内容 -->
      <div class="content">
        <div v-if="cards.now !== cards.birthdayToday" class="mid_title">
          <div class="mid_t1">
            <div class="icon_item">
              <div class="icon_rect icon_color_b_1"></div>
              <div class="icon_text icon_color_1">客情</div>
            </div>
            <div class="icon_item">
              <div class="icon_rect icon_color_b_2"></div>
              <div class="icon_text icon_color_2">沙龙</div>
            </div>
            <div class="icon_item">
              <div class="icon_rect icon_color_b_4"></div>
              <div class="icon_text icon_color_4">生日</div>
            </div>
            <!-- <div class="icon_item">
              <div class="icon_rect icon_color_b_3"></div>
              <div class="icon_text icon_color_3">其他</div>
            </div> -->
          </div>
          <div class="mid_t2">
            <div style="width: 42%">
              <el-input
                v-model="searchInput"
                :maxlength="10"
                clearable
                show-word-limit
                size="small"
                :placeholder="searchPlaceholder"
                prefix-icon="el-icon-search"></el-input>
            </div>
            <div>
              <el-button v-if="searchOnGoing" type="primary" plain size="mini" icon="el-icon-loading" disabled>
                搜索
              </el-button>
              <el-button
                v-else
                type="primary"
                plain
                size="mini"
                icon="el-icon-search"
                @click.stop="handleSearchInput(false)">
                搜索
              </el-button>
              <el-button
                type="info"
                plain
                size="mini"
                icon="el-icon-refresh-right"
                @click.stop="handleSearchInput(true)">
                重置
              </el-button>
            </div>
          </div>
        </div>
        <div>
          <el-tabs v-model="cards.now" type="card" @tab-click="handleClickCard">
            <el-tab-pane :name="cards.actWeek">
              <span slot="label">
                <i class="el-icon-date"></i>
                活动周历
              </span>
              <activity-week ref="refActWeek"></activity-week>
            </el-tab-pane>
            <el-tab-pane :name="cards.actMonth">
              <span slot="label">
                <i class="el-icon-date"></i>
                活动月历
              </span>
              <activity-month ref="refActMonth"></activity-month>
            </el-tab-pane>
            <el-tab-pane :name="cards.actList">
              <span slot="label">
                <i class="el-icon-tickets"></i>
                活动详情
              </span>
              <!-- <activity-list ref="refActList" @act-modify="handleActModify"></activity-list> -->
              <quan-an-list ref="refQuanAnList"></quan-an-list>
            </el-tab-pane>
            <!-- <el-tab-pane :name="cards.birthdayToday">
              <span slot="label">
                <i class="el-icon-tickets"></i>
                当天生日
              </span>
              <birtyday-today ref="refBirthdayToday"></birtyday-today>
            </el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui';
import ActivityList from './activity/ActivityList.vue';
import ActivityMdf from './activity/ActivityMdf.vue';
import ActivityMonth from './activity/ActivityMonth.vue';
import ActivityWeek from './activity/ActivityWeek.vue';
import BirtydayToday from './activity/BirtydayToday.vue';
import ClerkFilter from './activity/ClerkFilter.vue';
import QuanAnList from './activity/QuanAnList.vue';

export default {
  name: 'SalonPrivateDomain', // 私域运营
  components: {
    ['activity-week']: ActivityWeek,
    ['activity-month']: ActivityMonth,
    ['activity-list']: ActivityList,
    ['clerk-filter']: ClerkFilter,
    ['activity-mdf']: ActivityMdf,
    ['birtyday-today']: BirtydayToday,
    ['quan-an-list']: QuanAnList,
  },
  data() {
    return {
      // 弹出页面管理
      pages: {
        pageMain: { popMe: true },
        pageClerkFilter: { popMe: false },
        pageActMdf: { popMe: false },
      },
      // 门店统计数据
      statitic: {
        todayRecord: 100,
        allRecord: 500,
        todayClerk: 20,
        allClerk: 150,
        todayTrust: 30,
        allTrust: 200,
        todayMoney: 1500,
        monthMoney: 6000,
        todayNoble: 5,
        allNoble: 30,
      },
      cards: {
        now: 'actWeek',
        actWeek: 'actWeek',
        actMonth: 'actMonth',
        actList: 'actList',
        birthdayToday: 'birthdayToday',
      },
      searchInput: '',
      searchPlaceholder: '模糊搜索活动负责人',
      searchOnGoing: false,
    };
  },
  computed: {},
  async created() {},
  mounted() {
    this.prepareActWeek();
  },
  methods: {
    prepareActWeek: async function () {
      if (this.$refs.refActWeek) {
        this.$refs.refActWeek.loadWeekActList();
        return;
      }
    },
    handleClickCard: async function (tab, event) {
      if (tab.name === this.cards.actWeek) {
        await this.$nextTick();
        this.$refs.refActWeek.loadWeekActList();
        return;
      } else if (tab.name === this.cards.actMonth) {
      } else if (tab.name === this.cards.actList) {
        await this.$nextTick();
        this.$refs.refQuanAnList.getList(null);
        return;
      } else if (tab.name === this.cards.birthdayToday) {
        await this.$nextTick();
        this.$refs.refBirthdayToday.getList();
      }
    },
    handleClickAddAct() {
      this.pages.pageMain.popMe = false;
      this.pages.pageClerkFilter.popMe = true;
    },
    handleClickEmpty() {
      MessageBox.alert('暂未开放');
      return;
    },
    handleCancelAddAct: async function (val) {
      this.pages.pageMain.popMe = true;
      this.pages.pageClerkFilter.popMe = false;
      if (val === 'list') {
        this.cards.now = this.cards.actList;
        await this.$nextTick();
        if (this.$refs.refQuanAnList) {
          this.$refs.refQuanAnList.getList(null);
        }
      }
    },
    handleCancelMdfAct: async function (val) {
      this.pages.pageMain.popMe = true;
      this.pages.pageActMdf.popMe = false;
      if (val === 'list') {
        this.cards.now = this.cards.actList;
        await this.$nextTick();
        if (this.$refs.refQuanAnList) {
          this.$refs.refQuanAnList.getList(null);
        }
      }
    },
    handleActModify: async function (act) {
      this.pages.pageMain.popMe = false;
      this.pages.pageActMdf.popMe = true;
      await this.$nextTick();
      this.$refs.refPageActMdf.editActivity(act);
    },
    handleSearchInput: async function (clear) {
      if (this.searchOnGoing) {
        return;
      }
      const s = this.searchInput.trim();
      if (!clear && !s) {
        MessageBox.alert('请输入搜索内容');
        return;
      }
      if (clear) {
        this.searchInput = '';
      }

      this.searchOnGoing = true;
      try {
        if (this.cards.now === this.cards.actWeek) {
          await this.$refs.refActWeek.searchKeeper(s);
        } else if (this.cards.now === this.cards.actMonth) {
          await this.$refs.refActMonth.searchKeeper(s);
        } else if (this.cards.now === this.cards.actList) {
          await this.$refs.refQuanAnList.getList(s);
        }
      } finally {
        this.searchOnGoing = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$page_font_family: 思源黑体 微软雅黑 Noto Sans SC-Medium;
$title-label-size: 0.27333rem;
$mid_title_color_overtime: #ff5b5b;
$mid_title_color_complete: #724eff; /* 沙龙 */
$mid_title_color_not_participated: #f29339; /* 客情 */
$mid_title_birthday: #469b78; /* 生日 */

.page {
  width: 100%;
  height: 100%;
  background-color: #f8f8fa;
  padding: 5px 10px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.page_filter {
  height: 800px;
  overflow: hidden;
}

.title_div {
  width: 100%;
  height: 60px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  background-color: #f8f8fa;
  border-radius: 4px 4px 4px 4px;
}

.title_item {
  width: 220px;
  height: auto;
  margin: 0 0;
  padding: 5px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title_add_act {
    width: 100%;
    height: auto;
    opacity: 1;
    /* 自动布局 */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px;
    gap: 20px;
    cursor: pointer;

    .icon_add_1 {
      width: $title-label-size;
      height: $title-label-size;
    }

    .icon_add_2 {
      .icon_text {
        width: 100%;
        height: 100%;
        color: #165dff;
        opacity: 1;
        display: block;
        font-family: $page_font_family;
        font-size: 26px;
        font-weight: 500;
        line-height: 48px;
        letter-spacing: 0px;
        z-index: 1;
      }
    }
  }

  .title_h0 {
    display: flex;
    align-items: center;

    .title_icon {
      width: 35px;
      height: 35px;
    }

    .title_h1 {
      margin-left: 12px;
      font-weight: 500;
      font-size: 16px;
      color: #666666;
    }
  }

  .title_ctx {
    font-weight: 600;
    font-size: 32px;
    color: #4d4d4d;
  }

  .title_h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title_sub {
      display: flex;

      .title_new {
        color: #ff5b5b;
        padding: 1px 2px;
      }

      .title_foot {
        padding: 0px 0px;
        font-size: 16px;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        color: #666666;
      }
    }
  }
}

.content {
  width: 100%;
  height: auto;
  position: relative;

  .mid_title {
    position: absolute;
    left: 450px;
    top: 5px;
    width: 69%;
    height: 35px;
    opacity: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    .mid_t1 {
      width: 30%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 15px;

      .icon_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;

        .icon_rect {
          width: 12px;
          height: 12px;
          opacity: 1;
        }

        .icon_text {
          font-family: $page_font_family;
          font-size: 12px;
          font-weight: normal;
          line-height: 22px;
          display: flex;
          align-items: center;
          letter-spacing: 0px;
          font-variation-settings: 'opsz' auto;
          font-feature-settings: 'kern' on;
        }

        .icon_color_1 {
          color: $mid_title_color_not_participated;
        }

        .icon_color_2 {
          color: $mid_title_color_complete;
        }

        .icon_color_3 {
          color: $mid_title_color_overtime;
        }

        .icon_color_4 {
          color: $mid_title_birthday;
        }

        .icon_color_b_1 {
          background-color: $mid_title_color_not_participated;
        }

        .icon_color_b_2 {
          background-color: $mid_title_color_complete;
        }

        .icon_color_b_3 {
          background-color: $mid_title_color_overtime;
        }

        .icon_color_b_4 {
          background-color: $mid_title_birthday;
        }
      }
    }

    .mid_t2 {
      width: 60%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 15px;
      z-index: 2;
    }
  }
}
</style>
